<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var moon = new Image()
    var earth = new Image()
    var sun = new Image()
    function init() {
      sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
      moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
      earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
      window.requestAnimationFrame(draw)
    }

    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d')
      ctx.globalCompositeOperation = 'destination-over'
      ctx.clearRect(0, 0, 300, 300)
      ctx.fillStyle = 'rgba(0,0,0,0.4)';
      ctx.strokeStyle = 'rgba(0,153,255,0.4)';

      // earth
      ctx.save()
      ctx.translate(150, 150)
      var time = new Date()
      ctx.rotate((2 * Math.PI) / 60 * time.getSeconds() + (2 * Math.PI) / 60000 * time.getMilliseconds())
      ctx.translate(105, 0)

      // shadow
      ctx.fillRect(0, -12, 40, 24);
      ctx.drawImage(earth, -12, -12)

      // moon
      ctx.save()
      ctx.rotate((2 * Math.PI) / 6 * time.getSeconds() + (2 * Math.PI) / 6000 * time.getMilliseconds())
      ctx.translate(28.5, 0)
      ctx.drawImage(moon, -3.5, -3.5)

      ctx.restore()
      ctx.restore()

      // track
      ctx.beginPath()
      ctx.arc(150, 150, 105, 0, 2 * Math.PI, true)
      ctx.stroke()

      // sun
      ctx.drawImage(sun, 0, 0, 300, 300)

      window.requestAnimationFrame(draw)
    }
  </script>
</head>
<body onload="init()">
  <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>